<template>
  <div class="dashboard-container">
    <el-card class="tree-card">
      <!-- 用了一个行列布局  row 表示行  col表示列 像是栅格系统 一行就24列  基于element-ui组件库 -->
      <!--  使用单个的组件提高它的复用性  -->
      <tree-tools :node-data="titleData" @on-open="total" />
      <!--  树状图tree -->
      <el-tree :data="departs" :props="defaultProps"> <!-- 中间的代码就是插槽内容，用于定制每一行的布局效果 -->
        <!--   接收子组件传过来额数组对象  下面就是el内部定义的插槽-->
        <template v-slot="scoped">
          <!--  再将数据传给自定义的组件哈 -->
          <tree-tools :node-data="scoped.data" @on-success="onSuccess" @on-open="total" />
        </template>
      </el-tree>
    </el-card>
    <!-- 自定义弹窗  @on-close="toggle"-->
    <add-dept :isdone="isDanlod" :is-show-dept.sync="isShowDept" :dept-id="currentDeptId" :dlist="dlist" @on-success="onSuccess" />
  </div>
</template>

<script>
//  公共处理数组转换成树
import { translateListToTreeData } from '@/utils/index.js'
// 导入自定义组件
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'
// 获取部门列表数据
import reqGetDepartments from '@/api/departments'
export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  data() {
    return {
      currentDeptId: '-1', // 记录当前部门信息哈
      isShowDept: false, // 控制添加弹窗
      isDanlod: '', // 保存唯一表示缀 添加跟编辑的
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: { // 来操作树状图展示内容,与叶子节点展示
        label: 'name',
        children: 'children'
      },
      // 标题的数据
      titleData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        root: true,
        id: ''
      },
      // 保存一份数组哈
      dlist: []
    }
  },
  created() { // 一创建组件就获取到部门列表数据哈
    this.reqGetDepartments()
  },
  methods: {
    toggle(flge) { // 点击取消按钮关闭弹
      this.isShowDept = flge
    },
    total(info) { // 点击开启弹窗
      this.isShowDept = true
      this.currentDeptId = info.id // 保存本部门信息
      this.isDanlod = info.pedType
    },
    // 删除部门后重新拉去数据 更新当前页面哈
    onSuccess() {
      this.reqGetDepartments()
    },
    async reqGetDepartments() {
      const resp = await reqGetDepartments()
      if (resp.code === 10000) {
        this.departs = translateListToTreeData(resp.data.depts, '') // 赋值给部门的树状图中哈
        this.dlist = resp.data.depts
        this.titleData.name = resp.data.companyName // 标题
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size:14px;
}
</style>
